<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">{{ $t("common.home") }}</el-breadcrumb-item>
    <el-breadcrumb-item :to="path" v-if="path">{{ serviceName }}</el-breadcrumb-item>
    <el-breadcrumb-item v-if="!path">{{ serviceName }}</el-breadcrumb-item>
    <el-breadcrumb-item v-if="path">{{ name }}{{ modelServiceName }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>

export default {
  /**
   * btnPath 请求地址
   * infoName 操作类型  添加 编辑 查看
   * servicePath 上级菜单名称
   * modelName  当前业务名称
   */
  props: ['btnPath', 'infoName', 'servicePath','modelName'],
  name: "breadcrumbBox",
  data() {
    return {
      path: '',
      name: '',
      serviceName: '',
      modelServiceName:''
    }
  },
  watch: {
    btnPath: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.path = {path: newValue}
        }
      },
      deep: true,
      immediate: true
    },
    infoName: {
      handler(newValue, oldValue) {
        // debugger
        this.name = newValue
      },
      deep: true,
      immediate: true
    },
    servicePath: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.serviceName = newValue
        }
      },
      deep: true,
      immediate: true


    },
    modelName: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.modelServiceName = newValue
        }
      },
      deep: true,
      immediate: true


    },
  },
}
</script>

<style scoped>

</style>
